<template>
	<view class="main">

		<view class="search">
			<uni-search-bar :focus="true" bgColor="#d8d8d8" cancelButton="none" style="width: 100%;">
			</uni-search-bar>
			<uni-icons type="scan" size="30" style="margin-top: 35rpx;margin-right: 10rpx;"></uni-icons>
		</view>

		<uni-notice-bar show-icon scrollable text="知识星球第一次开发,版本1.0.希望大家多多支持!!!" style="background-color: white;" />

		<!-- 星球 -->
		<view class="plant">
			<!-- 我的星球 -->
			<uni-section class="myPlant" title="我的星球" title-color="#bff0ab" padding="0rpx" titleFontSize="40rpx">
				<template v-slot:decoration>
					<view class="decoration"></view>
				</template>
				<view style="width: 100%;">
					<view class="myPlant_main">
						<uni-row class="demo-uni-row">


							<view v-for="(item,index) in myInfo" key="index">
								<uni-col :xs="12" :sm="6" :md="4" :lg="4" :xl="1" class="col">
									<!-- 我的星球图片 -->
									<view class="card" @click="toGeren" :data-id="item.id" :data-image="item.plantPic" :data-planetName="item.name">

										<image :src="item.plantPic" mode="heightFix" class="myPlant_img">
										</image>
										<view style="display: flex;flex-direction: column;height: 30%;width: 100%;">
											<view style="height: 30%;">
												<text class="myPlant_text"
													style="font-size: 35rpx;font-weight: 700;margin:3% 0% 2% 7%;">{{item.name}}</text>
											</view>
											<view
												style="height: 70%;display: flex;flex-direction: column;justify-content: center;width: 100%;">
												<text class="myPlant_text"
													style="font-size: 5rpx;font-weight: 100;width: 70%;margin: 0 0 0 7%;">{{item.nickName}}</text>
												<view style="display: flex;justify-content: center;height: 50rpx;width: 50rpx;align-items: center;overflow: hidden;
													position: absolute;margin-left: 200rpx;border-radius: 50%;">
													<image mode="heightFix" :src="item.avatar"
														style="height: 60rpx;position: absolute;">
													</image>
												</view>
											</view>
										</view>
									</view>
								</uni-col>
							</view>

							<uni-col :xs="12" :sm="6" :md="4" :lg="4" :xl="1" class="col">
								<!-- 添加星球 -->
								<view class="card" @click="toAdd">
									<view class="add" style="display: flex;
									justify-content: center;
									align-items: center;">
										<uni-icons type="plus" size="80rpx" color="#b4b4b4"></uni-icons>
										<text style="font-size: 30rpx;">添加星球</text>
									</view>
								</view>
							</uni-col>


						</uni-row>
					</view>
				</view>
			</uni-section>


			<!-- 优质星球 -->
			<uni-section class="myPlant" title="优质星球" title-font-size="40rpx" title-color="#adf084" padding="0rpx">
				<template v-slot:decoration>
					<view class="decoration"></view>
				</template>
				<view class="myPlant_main">
					<uni-row class="demo-uni-row">
					
					
						<view v-for="(item,index) in HotInfo" key="index" @click="toJoin(item)"> 
							<uni-col :xs="12" :sm="6" :md="4" :lg="4" :xl="1" class="col">
								<!-- 我的星球图片 -->
								<view class="card"  :data-id="item.id" :data-image="item.plantPic">
						
									<image :src="item.plantPic" mode="heightFix" class="myPlant_img">
									</image>
									<view style="display: flex;flex-direction: column;height: 30%;width: 100%;">
										<view style="height: 30%;">
											<text class="myPlant_text"
												style="font-size: 35rpx;font-weight: 700;margin:3% 0% 2% 7%;">{{item.name}}</text>
										</view>
										<view
											style="height: 70%;display: flex;flex-direction: column;justify-content: center; ">
											<text class="myPlant_text"
												style="font-size: 5rpx;font-weight: 100;width: 70%;margin: 0 0 0 7%;">{{item.nickName}}</text>
											<view style="display: flex;justify-content: center;height: 50rpx;width: 50rpx;align-items: center;overflow: hidden;
												position: absolute;margin-left: 200rpx;border-radius: 50%;">
												<image mode="heightFix" :src="item.avatar"
													style="height: 60rpx;position: absolute;">
												</image>
											</view>
										</view>
									</view>
								</view>
							</uni-col>
						</view>
						

					</uni-row>
				</view>
			</uni-section>

			<!-- <view style="width: 100%;padding-left: 30rpx;font-size: 26rpx;margin-bottom: 20rpx;">你可能感兴趣</view> -->

			
			<view style="height: 200rpx;"></view>
		</view>



	</view>
</template>

<script>
	import plantCard from '@/components/plant-card/plant-card.vue'
	import request from '@/common/request.js'

	export default {
		name: "plant",
		components: {
			plantCard
		},
		data() {
			return {
				plantStyle: '',
				margin: '',
				avatar: 'https://web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
				myInfo: [],
				HotInfo:[],
				myId:[]
			}
		},
		methods: {
			//加入星球
			toJoin(e) {
				console.log(e);
				var id=e.id
				var image=e.plantPic
				var planetName=e.name
				var flag=null
				var i=0
				for(i;i<this.myId.length;i++){
					if(this.myId[i]==e.id){
						flag=true
					}
				}
					
				if(flag==true){
					uni.navigateTo({
						url: '/pages/View/planet/geren?id=' + id + '&image=' + image +'&planetName=' + planetName 
					})
				}else{
					uni.setStorage({
						key:'planet',
						data:e,
						success:(res)=>{
							uni.navigateTo({
								url:'/pages/View/planet/particulars'
							})
						}
					})
				}					
			},
			// 去往我的星球详情页面
			toGeren(e) {
				console.log(e);
				var id = e.currentTarget.dataset.id
				var image = e.currentTarget.dataset.image
				var planetName=e.currentTarget.dataset.planetname
				uni.navigateTo({
					url: '/pages/View/planet/geren?id=' + id + '&image=' + image +'&planetName=' + planetName 
				})
			},
			toAdd() {
				console.log(111)
				uni.navigateTo({
					url: '/pages/View/newPlanet/newPlanet'
				})
			}
		},
		onShow() {
			uni.showLoading({
				title: '加载中'
			});
			request('/plant/getMyPlanet', '', 'GET').then((res) => {
				this.myInfo=[]
				var i = 0
				for (i; i < res.data.length; i++) {
					res.data[i].plantPic = 'http://118.24.29.136:9000/pic/' + res.data[i].plantPic
					this.myInfo.push(res.data[i])
				}
			})
			request('/plant/getHotPlant',null,'GET').then(res=>{
				this.HotInfo=[]
				var i = 0
				for (i; i < res.data.length; i++) {
					res.data[i].plantPic = 'http://118.24.29.136:9000/pic/' + res.data[i].plantPic
					this.HotInfo.push(res.data[i])
				}
			})
			request('/plant/getMyJoinPlanet',null,'GET').then(res=>{
				console.log(res);
				var i=0
				for(i;i<res.data.length;i++){
					this.myId.push(res.data[i].plantid)
				}		
			})
			

			if(this.myInfo!=[] && this.HotInfo!=[]){
				uni.hideLoading();
			}
			}
		}
</script>

<style>
	.main {
		width: 100%;

		background-color: white;
	}

	.search {
		display: flex;
	}

	.plant {
		width: 100%;
		height: 100%;
		background-color: #f8fff3;
	}

	.myPlant {
		width: 100%;
		background-color: #fdfff8;
	}

	.plant_item {
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	/* 星球卡片 */
	.card {
		height: 400rpx;
		border-radius: 5px;
		background: linear-gradient(to right, #e1e1e1, #c7c7c7);
		width: 80%;
		margin-left: 10%;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

	}

	.demo-uni-row {
		// 组件在小程序端display为inline
		// QQ、字节小程序文档写有 :host，但实测不生效
		// 百度小程序没有 :host
		/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
		display: block;
		/* #endif */
	}

	.col {
		margin-bottom: 40rpx;
	}

	.myPlant_img {
		height: 280rpx;
		object-fit: contain;
	}

	.avater_view {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		background-color: aqua;
		margin-top: 3%;
		overflow: hidden;
	}


	/* 添加星球卡片 */
	.add {
		width: 70%;
		height: 100rpx;
		margin-left: 15%;
		padding-top: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.avaterA {
		height: 140rpx;
		width: 140rpx;
		background-color: #d7ffce;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 30rpx;
	}

	.suggest {
		display: flex;
		width: 700rpx;
		padding: 15rpx 50rpx 15rpx 40rpx;
		height: 170rpx;
		border: 0.5rpx solid #c8c8c8;
		margin: 0 5% 30rpx 5%;
		border-radius: 10rpx;
		box-shadow: 5px 0px 6px #d4d4d4;
		background-color: white;
	}

	.content {
		width: 500rpx;
		height: 140rpx;
		background-color: white;
	}

	.ct {
		display: flex;
		flex-direction: column;
	}

	.card {
		height: 400rpx;
		border-radius: 5px;
		width: 80%;
		margin-left: 10%;
		overflow: hidden;
	}

	.myPlant_img {
		height: 70%;
	}

	.avater_view {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		background-color: aqua;
		margin-top: 3%;
		overflow: hidden;
	}

	/* 头像 */
	.avater {
		width: 70rpx;
	}
</style>